<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/static/admin/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/admin/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/static/admin/css/amazeui.min.css" />
    <link rel="stylesheet" href="/static/admin/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/static/admin/css/app.css">
    <script src="/static/admin/js/jquery.min.js"></script>
    {load href="/static/admin/css/bootstrap.min.css"}
    {js href="/static/admin/js/jquery.min.js"}
    {js href="/static/admin/js/bootstrap.min.js"}
</head>

<body data-type="widgets">
    <script src="/static/admin/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部导航栏 -->
        {include file="public/header" /}
        <!-- 侧边导航栏 -->
        {include file="public/left" /}


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">角色列表</div>


                            </div>
                            <div class="widget-body  am-fr">

                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                    <div class="am-form-group">
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <button class="btn btn btn-success" data-toggle="modal" data-target="#login" >新增角色</button>
                                                <div id="login" class="modal fade" style="margin-top:100px; ">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-body">
                                                                <button class="close" data-dismiss="modal">
                                                                    <span>&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-title">
                                                                <h1 class="text-center">新增角色</h1>
                                                            </div>
                                                            <div class="modal-body row" >
                                                                <div class="col-md-1"></div>
                                                                <div class="col-md-10">
                                                                    <form class="form-group" action="adminRoleAdd" method="post">
                                                                        <div class="form-group">
                                                                            <label for="">角色名称</label>
                                                                            <input name="role" class="form-control" type="text" placeholder="请输入用户名">
                                                                        </div>
                                                                        <div class="text-right">
                                                                            <button class="btn btn-primary" type="submit">确定</button>
                                                                            <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                                                        </div>
                                                                </form>
                                                                </div>
                                                                <div class="col-md-1"></div>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
  
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>角色名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {volist name="list" key="key" id="v"}
                                            <tr>
                                                <td>{$v['id']}</td>
                                                <td>{$v['role']}</td>
                                                <td>
                                                    <a href="adminRoleEdit/{$v['id']}" class="btn btn-primary btn-sm">编辑</a>
                                                    <a href="adminRoleEditpower/{$v['id']}" class="btn btn-primary btn-sm">编辑权限</a>
                                                    <button class="btn btn-danger btn-sm del-btn" data-id="{$v['id']}">删除</button>
                                                </td>
                                            </tr>
                                            {/volist}
                                            <!-- more data -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="am-u-lg-12 am-cf">

                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination">
                                            <li class="am-disabled"><a href="#">«</a></li>
                                            <li class="am-active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">»</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- Modal -->

    <script src="/static/admin/js/amazeui.min.js"></script>
    <script src="/static/admin/js/app.js"></script>
    <script>
        $(function(){
            // 获取 删除动作
            $('.del-btn').click(function (){
                var ac_id = $(this).attr('data-id');
                // console.log(ac_id);
                if (confirm('确认 [ 删 除 ]么?!!!')) {
                    var obj = $(this).parents('tr');
                     //console.log(obj);
                    delAjax(obj, ac_id);
                }
            });
        });
       // AJAX删除
        function delAjax(obj, id) {
            $.ajax({
                type: 'get',
                url : '/adminRoleDelete/' + id,
                dataType : 'json',
                success : function (data){
                    // console.log(data);
                    if (data.status) {
                        // console.log('删除成功');
                        alert(data.info);
                        // 将obj元素删除
                        obj.remove();
                    } else {
                        // console.log('删除失败');
                        alert(data.info, 'FBI WARNING: ');
                    }
                },
                error : function () {
                    alert('操作失败!');
                }
            });
        }
    </script>

</body>

</html>